<template>
	<div>
		<div class="container">
			<el-row class="el-row1" style="background-color: #FFFFFF;">
				<el-col class="el-col1" :span="24">
					<div class="grid-content bg-purple-dark">
						<h3 class="shxx">收货信息</h3>
					</div>
				</el-col>
				<el-col class="el-col1" :span="8" v-for="(item,index) in AddressList.slice(0,3)">
					<div class="container address" :class="{ red:changeRed == index}" style="margin-top:45px; width: 200px; height: 180px; border: #768393 solid 1px; border-radius: 4px;"
					 @click="selectAddress(item.id,index)">
						<p>姓名：{{item.name}}</p>
						<p>电话：{{item.tel}}</p>
						<p>地址：{{item.address.slice(0,6)}}...</p>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="container" style="margin-top: 40px;">
			<el-row class="el-row2">
				<el-col style="height: 80px;" :span="24" class="bg-purple-dark">
					<h3 style="height: 80px; line-height: 80px; margin-left: 40px;">订单信息</h3>
				</el-col>
				<el-col :span="12">商品信息</el-col>
				<el-col :span="4">单价</el-col>
				<el-col :span="4">数量</el-col>
				<el-col :span="4">小计</el-col>
			</el-row>
			<el-row class="el-row3" style="background-color: #FFFFFF; border: #b1d6ea solid 1px;" v-for="item1 in shoppingList">
				<el-col :span="6"><img :src="item1.item_image" style="width: 60px; height: 60px; border: #000000 solid 1px;" /></el-col>
				<el-col :span="6">{{item1.item_title.slice(0,10)}}...</el-col>
				<el-col :span="4">{{item1.item_price}}</el-col>
				<el-col :span="4">{{item1.item_num}}</el-col>
				<el-col :span="4">{{item1.total}}</el-col>
			</el-row>
			<el-row style="background-color: #FFFFFF;">
				<el-col :span="2" :offset="21" style="height: 60px; line-height: 60px;">
					<el-button type="primary" @click="submitOrder()">提交订单</el-button>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				AddressList: [],
				shoppingList: [],
				order_code: this.$route.query.order_code,
				//默认地址
				addressID: 1,
				changeRed: 0,
			}
		},
		created() {
			this.$axios.get('http://localhost:8080/mall/findAlladdress').then(function(ret) {
				this.AddressList = ret.data.message;
			}.bind(this));
			this.getData();
		},
		methods: {
			async getData() {
				await this.$axios.get('http://localhost:8080/mall/findOrderDetailsById?order_code=' + this.order_code).then(function(ret) {
					this.shoppingList = ret.data.message;
				}.bind(this));
			},
			selectAddress: function(id, index) {
				this.addressID = id;
				this.changeRed = index;
			},
			submitOrder() {
				const res2 = this.$axios.get('http://localhost:8080/mall/orders/payAddress', {
					params: {
						order_code: this.order_code,
						address_id: this.addressID,
						flag: 0,
						status: 1
					}
				}).then((ret) => {
					if (ret.status == 200) {
						this.$message("提交订单成功!");
						console.log("提交订单成功!!");
						this.$router.push({
							path: '/ordersecond',
							query: {
								order_code: this.order_code
							}
						})
					}
				});
			},
			
		}
	}
</script>

<style lang="less">
	.red {
		background-color: #87b7d1;
	}

	.bg-purple-dark {
		border-radius: 20px 20px 0 0;
		height: 80px;
		background: #99a9bf;

	}

	.el-row1 {
		margin-top: 150px;
		border-radius: 20px;
		height: 350px;
		border: #002752 solid 1px;

		&:last-child {
			margin-bottom: 0;
		}

		.el-col1 {
			border-radius: 4px;

			.shxx {
				padding-top: 20px;
				padding-left: 40px;
			}

			.addAddress {
				border-radius: 4px;
			}

			.address p {
				margin-top: 20px;
				font-weight: bold;
			}
		}
	}

	.el-row2 {
		background-color: #FFFFFF;
		border-radius: 20px 20px 0 0;

		.el-col {
			height: 40px;
			font-size: 17px;
			text-align: center;
		}
	}

	.el-row3 .el-col {
		height: 100px;
		text-align: center;
		line-height: 100px;
	}
</style>
